<template>
  <div>
    <div class="hottop">
      <div class="banner">
        <div class="hotbanner">
          <div class="heijiao"  >
             <img src="https://p2.music.126.net/pzg1qQW5Q7gO_649Pj-E6w==/109951166006577150.jpg" alt="" srcset="">
             <span>专辑</span>
          </div>
        </div>
        <div class="hottime">
           <h2>{{album.name}}</h2>
           <div class="singer">&nbsp;&nbsp;&nbsp;&nbsp;歌手：{{album.artist.name}}</div><br>
           <div class="fxtime">发行时间：{{albumtime}}</div>
        </div>
      </div>
         <div class="introduct">
      <div class="textintro" ref="wid">
        {{album.description|ellipsis}}
     </div>
    </div>
     <!--歌曲列表 -->
<div class="bts"> 歌曲列表</div>
      <ul>
        <div>
          <li
            class="songlist"
            v-for="(item, index) in albumlistdata"
            :key="item.id">
            <div class="songnumitem">
              <span class="songnum" v-if="index < 9">0{{ index + 1 }}</span>
              <span class="songnum" v-else>{{ index + 1 }}</span>
              <div class="songlistitem">
                <span class="songname"
                  >{{ item.name }}
                  <!-- {{item.song.artists[0].name}} -->
                </span>
                <br/>
                <span  class="singername"
                >
                  {{ item.ar[0].name + "--"+item.name}}
                </span>
              </div>
              <div class="songpic">
              </div>
            </div>
          </li>
        </div>
      </ul>
    </div>
    <!--精彩评论 -->
<div class="bts">精彩评论</div>
<div class="wonder-comment">
      <ul>
        <div>
          <li
            class="wonderlist"
            v-for="(item, index) in singerlistdatasd"
            :key="item.id"
          >
            <div class="wonderitem">
               <div class="wonderuserpic">
                 <img :src="item.user.avatarUrl" alt="" >
               </div>

              <div class="wonderlistitem">
                 <!-- 用户名 -->
                <div class="wonderheizan">
                  <div class="wonderusername">
                    {{item.user.nickname}}
                  <div class="dianzan">
                    {{item.likedCount}}
                    </div>
                    <img class="huiyuan" src="https://z3.ax1x.com/2021/06/11/2fGD4e.png"/>
                  </div>

                </div>

                <!-- 时间 -->
               <span class="wondertime">{{timestampToTime(item.time)}}</span><br>
               <div class="wonderpinlun">
                 {{item.content}}
               </div>
              </div>

            </div>
          </li>
        </div>
      </ul>
</div>
<!-- 最新评论 -->
<div class="bts"> 最新评论</div>
<div class="wonder-comment">
      <ul>
        <div>
          <li
            class="wonderlist"
            v-for="(item) in newlistdata"
            :key="item.id"
          >
            <div class="wonderitem">
               <div class="wonderuserpic">
                 <img :src="item.user.avatarUrl" alt="" >
               </div>

              <div class="wonderlistitem">
                 <!-- 用户名 -->
                <div class="wonderheizan">
                  <div class="wonderusername">
                    {{item.user.nickname}}
                    <!-- ">蜡笔小新吕畅九</a> -->
                     <div class="dianzan">
                    {{item.likedCount}}
                    </div>
                    <img class="huiyuan" src="https://z3.ax1x.com/2021/06/11/2fGD4e.png"/>

                  </div>

                </div>

                <!-- 时间 -->
               <span class="wondertime">{{timestampToTime(item.time)}}</span><br>
               <div class="wonderpinlun">
                 {{item.content}}
               </div>
              </div>

            </div>
          </li>
        </div>
      </ul>
</div>

    <!-- <div class="mini-palyer-container" v-if="playsongname != ''">
      <img class="playicon" :src="songpicurl" alt="" />
      <div class="text" @click="selectMiniPlayer(selectid)">
        <span class="playertext-name">{{ playsongname }}</span>
        <span class="playertext-singer">{{ playsongsinger }}</span>
      </div>

      <div class="control">
        <audio :src="musicurl" @ended="overAudio" autoplay ref="audio"></audio>
        <div>
          <div class="play" v-if="isPlay">
            <i class="iconfont icon-bofang1"></i>
            <span @click="playAudio">Stop</span>
          </div>
          <div class="play" v-else>
            <i class="iconfont icon-zanting1" @click="pauseAudio"></i>
            <span @click="playAudio">Play</span>
          </div>
        </div>
      </div>
    </div>
     -->
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      songlistData: [],
      ablumstdata: [],
      singerlistdatasd: [],
      newlistdata: [],
      albumlistdata: [],
      selectid: '',
      album: {},
      albumtime: '',
      musicurlchuanzhi: '',
      jianjie: {},
      jjstate: 0
    }
  },
  created () {
    this.getSonglist()
    this.getTime()
    this.musicablumst()
    this.newcomment()
    this.hotComment()
  },
  filters: {
    ellipsis (value) {
      let len = value.length
      if (!value) return ''
      if (value.length > 20) {
        return value.substring(0, 94) + value.substring(len - 8, len) + '......'
      }
      return value
    }
  },
  methods: {
    getSonglist () {
      axios
        .get('http://171.220.242.237:3001/top/song?type=0')
        .then((res) => {
          console.log(res.data.result)
          console.log('音乐', res)
          this.songlistData = res.data.data
          // this.playsongname1=res.data.data[0].name
          // console.log(this.playsongsinger1)
        })
        .catch((err) => {
          console.error(err)
        })
    },
    getTime () {
      var date = new Date()
      this.day = date.getDate()
      this.month = date.getMonth()
    },
    selectPlayList (item) {
      console.log('before----------------' + this.isPlay)
      this.isPlay = true
      console.log('after----------------' + this.isPlay)
      this.selectid = item.id
      this.playsongname = item.name
      this.playsongsinger = item.ar[0].name + item.name
      // console.log("---------"+this.playsongname)
      // 点击歌曲列表，获得歌曲的ID然后通过ID拿到点击歌曲的URL地址
    },
    selectMiniPlayer (selectid) {
      const id = selectid
      console.log(id)
      // 发送请求
      axios.get('http://171.220.242.237:3001/song/url', {
        params: {
          id: id
        }
      })
        .then((res) => {
          console.log(res.data.data)
          const msicurl = res.data.data[0].url
          console.log('====================================')
          console.log(this.musicurlchuanzhi, '传值')

          let audio = this.$refs.audio
          const bofangtime = audio.currentTime
          console.log('time---------' + audio.currentTime)
          // 传值
          this.$router.push({
            name: 'Player',
            // eslint-disable-next-line standard/object-curly-even-spacing
            params: { id, bofangtime, audio, msicurl}
          })
          console.log('====================================')
        })
        .catch((err) => {
          console.error(err)
        })
      /// /////=========
    },
    // this.currentTime=this.$route.params.bofangtime;
    //  专辑简介
    musicablumst () {
      console.log('====================================')
      console.log('已运行。。。。。')
      console.log('====================================')
      axios
        .get('http://171.220.242.237:3001/album?id=127726536')
        .then((res) => {
          this.albumlistdata = res.data.songs
          console.log('简介', res.data)
          this.album = res.data.album
          this.albumtime = this.timestampToTime(res.data.album.publishTime)
          this.backgroundImgUrl = res.data.album.blurPicUrl
        })
        .catch((err) => {
          console.error('报错', err)
        })
    },
    background: function () {
      console.log('====================================')
      console.log('thisfdf', this.backgroundImgUrl)
      console.log('====================================')
      return {
        backgroundImage: 'url(' + this.backgroundImgUrl + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'center center'}
    },
    newcomment () {
      console.log('====================================')
      console.log('已运行。。。。。')
      console.log('====================================')
      axios
        .get('http://171.220.242.237:3001/comment/new?type=3&id=127726536&sortType=3')
        .then((res) => {
          console.log('新评论', res.data.data.comments)
          this.newlistdata = res.data.data.comments
          // this.playsongname1=res.data.data[0].name
          // console.log(this.playsongsinger1)
        })
        .catch((err) => {
          console.error('报错', err)
        })
    },
    hotComment () {
      console.log('====================================')
      console.log('热门评论')
      console.log('====================================')
      axios
        .get('http://171.220.242.237:3001/comment/hot?id=127726536&type=3')
        .then((res) => {
          console.log('热门评论', res.data.hotComments)
          this.singerlistdatasd = res.data.hotComments
          // this.playsongname1=res.data.data[0].name
          // console.log(this.playsongsinger1)
        })
        .catch((err) => {
          console.error('报错', err)
        })
    },
    timestampToTime (timestamp) {
      var date = new Date(timestamp)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() + ' '
      return String(Y + M + D)
    }

  // 专辑
  }
}
</script>

<style scoped>
.text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 20px;
  overflow: hidden;
}
.playertext-name {
  margin-bottom: 2px;
  font-size: 17px;
  color: rgb(7, 14, 121);
}
.playertext-singer {
  font-size: 15px;
  color: rgb(139, 139, 184);
}

.playicon {
  margin-left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.control {
  flex: 0 0 30px;
  padding: 0 10px;
  color: #d44439;
  margin-right: 30px;
}
.mini-palyer-container {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background: rgb(136, 96, 96);
  border-radius: 10px;
  /* padding: 5px; */
}
/* 列表的样式 */
.songnumitem {
  display: flex;
}
.bts{
  font-size: 10px;
  text-align: left;
}
.songlistitem {
  text-align: left;
  margin-bottom: 10px;
  border-bottom: rgb(231, 225, 225) 0.1px solid;
  width: 100%;
}
.songlist {
  text-align: left;
  padding: 0 0 0 10px;
}
.songname {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif, STHeiTi;
  line-height: 1.5;
  color: #333;
}
.singername {
  font-size: 12px;
  color: #888;
  font-family: Arial, Helvetica, sans-serif;
}
.songnum {
  color: #df3436;
  margin-top: 15px;
  margin-right: 15px;
}
.wonderlist {
  text-align: left;
  padding: 0 0 0 10px;
}
.wonderitem{
    display: flex;
}
.wonderuserpic{
  width: 30px;
  height: 35px;
    color: #df3436;
  margin-top: 5px;
  margin-right: 15px;
}
.wonderuserpic>img{
    width: 30px;
    height: 30px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius:20px ;
}
.wonderlistitem{
  width: 325px;
  height: auto;
    text-align: left;
  margin-bottom: 10px;
  border-bottom: rgb(231, 225, 225) 0.1px solid;
  width: 100%;
}

.wonderusername{
    font-size: 18px;
    flex: left;
  font-family: Arial, Helvetica, sans-serif, STHeiTi;
  color: #333;
}
.wondertime{
   font-size: 12px;
  color: #888;
  font-family: Arial, Helvetica, sans-serif;
}
.wonderheizan{
  width: 303px;
  height: 22px;
}
.huiyuan{
  opacity:0.5;
  display: inline-flex;
  width: 21px;
  float: right;
  height: 21px;
}
.dianzan{
    display: inline-flex;
    float: right;
    opacity:0.7;
  width: 40px;
  height: 21px;
}

.wonderpinlun{
  width: 315px;
   font-size:14px;
    max-width:90%;
  margin-top: 10px;
}
.banner {
  overflow: hidden;
  width: 100%px;
  height: 180.08px;
  /* url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252…=) */
  background: rgb(186, 186, 186)
    no-repeat;
  background-size: contain;
  padding: 0 0 0 20px;
  content: "";
  z-index: 1;
}
.hotbanner {
  background: url(//s3.music.126.net/mobile-new/img/album@2x.png?4d5d63f…=)
    no-repeat;
  background-size: 170px 180px;
  width: 144.9px;
  height: 126px;
  float:left;
  margin-top: 7%;
  background-position: -24px -30px;
}
.heijiao{
   width: 126px;
   height: 126px;
   background: url(//s3.music.126.net/mobile-new/img/album@2x.png?4d5d63f…=)
    no-repeat;
}
.heijiao>span{
  position:absolute;
  left:5%;
	top:16%;
	z-index:1;
  background: rgba(red, rgb(243, 9, 9), rgb(253, 9, 9), 0.5);
  color: rgb(243, 9, 9);
}

.heijiao>img{
  width: 126px;
  height: 126px;

}
/* .heijiaopic{
  width: 126px;
  height: 126px;
} */

.hottime{
  width: 198.2px;
  height: 126px;
  margin-top: 7%;
  float:left;
  margin-left: -30px;
}
.hottime>h2{
flex: left;
 padding-top: 10px;
    font-size: 17px;
    line-height: 1.3;
    color: #fefefe;
}
.introduct{
  width:375px;
  height: 83px;
  padding: 10px 10px 0 15px;
}
.textintro{
    width:350px;
  height: 55px;
      position: relative;
    padding-bottom: 18px;
    line-height: 19px;
    color: #666;
    font-size:14px;
    max-width:90%;
}
.songpic{
    color: #df3436;
    margin-top: 5px;
    margin-right: 14px;
    flex: right;
    width: 30px;
    height: 20px;
    background-image: url(https://z3.ax1x.com/2021/06/09/26R9Vs.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color:rgba(0,0,0,0.3)
}
</style>
